<template>
    <van-nav-bar title="详情页" left-text="返回" left-arrow @click-left="onClickLeft">
        <template #right>
            <van-icon name="search" size="18" />
        </template>
    </van-nav-bar>
    <!--编辑商品信息-->
    <van-image width="100%" height="300" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
    <div style="font-size: 25px;"><van-icon name="new-arrival" color="red" size="33px" /> &nbsp;
        <strong>苹果 iPhone 16（A3288）128GB 粉色 支持移动联通电信5G 双卡双待手机</strong>
    </div>
    <div style="color: red;">打折价格：￥<strong style="font-size: 30px; ">4299.00</strong></div>
    <div style="color: #bfc0c0; text-decoration:line-through;">商品原价：￥<strong>4999.00</strong></div>

    <van-row style="height: 40px; line-height: 40px; text-align: center; font-size: 18px; color: #9c9797;">
        <van-col span="8">
            <van-icon name="smile-comment" size="20px" /> 分享
        </van-col>
        <van-col span="8">
            <van-icon name="star" size="20px" /> 收藏
        </van-col>
        <van-col span="8">
            <van-icon name="new" size="20px" /> 降价通知
        </van-col>
    </van-row>
    <hr>
    <img src="https://img14.360buyimg.com/cms/jfs/t1/281590/2/1437/52765/67d1499cF423a7791/96a6d57e0560c262.jpg" alt="" width="100%">


    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-action-bar-icon icon="cart-o" text="我的订单" @click="onClickIcon" />
        <van-action-bar-icon icon="shop-o" text="电影院" @click="onClickIcon" />
        <van-action-bar-button type="danger" text="立即预定" @click="onClickButton" />
    </van-action-bar>

</template>

<script setup>
import { useRoute } from 'vue-router';

const onClickLeft = () => history.back();
//获取id值
const id = useRoute().query.id
console.log(id);




// 函数定义
const onClickIcon = () => { 
    console.log("点击图标");
    
}
const onClickButton = () => {
    console.log("点击按钮");
}

</script>

<style scoped>

</style>